<template>
  <div id="app">
    <!-- 放一个坑 ,用来承载路径匹配到的路由组件 -->
    <RouterView />

    <h1>我是 App</h1>

    <!-- 普通 a 标签的方式, 路由跳转 页面跳转 -->
    <a href="#/home">首页</a>
    <a href="#/about">关于页面</a>

    <hr />
    <!-- router-link 组件的方式 to 字符串方式 不需要#-->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于页面</router-link>

    <hr />
    <!-- router-link 高亮效果,借助与它自带的一个 router-link-active 类名 这个类名会自动添加或移除 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于页面</router-link>

    <hr />
    <!-- 
      上面使用的是 a 标签方式 \ router-link 组件方式 这两种方式可以叫做 声明式导航(声明式跳转\a标签跳转)

      还有一种是 js 代码控制的方式: location.href

      用js控制跳转的方式,叫做 编程式导航(编程式跳转\js跳转)

      1. 声明式导航
      2. 编程式导航 
          this.$router === router/index.js 暴露的那个对象 === new VueRouter 接收的那个东西

          this.$router.push() || this.$router.replace()
     -->

    <!-- this.$router.push('') 字符串 -->
    <button @click="$router.push('/home')">首页</button>
    <button @click="onClick">关于页面</button>
  </div>
</template>

<script>
export default {
  name: "App",

  created() {
    console.log(this);
  },

  methods: {
    onClick() {
      this.$router.push("/about").catch((err) => {
        console.log(err);
      });
    },
  },
};
</script>

<style>
.router-link-active {
  color: red;
}
</style>
